<template>
  <div id="recruitmentCharts">
    <div class="top">
      <globle-linear-border class="top-chart"><el-card id="majorType"></el-card></globle-linear-border>
      <globle-linear-border class="top-chart"><el-card id="collegeType"></el-card></globle-linear-border>
      <globle-linear-border class="top-chart"><el-card id="sexScale"></el-card></globle-linear-border>
    </div>
    <globle-linear-border class="bottom"><el-card id="recruitmentCount"></el-card></globle-linear-border>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue';
import echarts from '../../../echarts';
import { useUtils } from '../../../utils';
import { useAPI } from '../../../request/api';
import { useUserStore } from '../../../store/user';
import { APIData, IThemeColor, IRecruitmentChart } from '../../../type';
import { useThemeStore } from '../../../store/theme';
import { ElMessage } from 'element-plus';
import { recruitmentCountChart, IRecruitmentCountParams } from './chratsInit/recruitmentCount';
import { twoScaleChart, ITwoScaleParams } from './chratsInit/twoScale';
import { sexScaleChart, ISexScaleParams } from './chratsInit/sexScale';
const utils = useUtils();
const store = useUserStore();
const themeStore = useThemeStore();
const api = useAPI();

onMounted(async () => {
  await getChartData();
  initAllCharts();
});

onBeforeUnmount(() => {
  disposeAllCharts();
});

let currentIndex = 0;
let chartData = {} as IRecruitmentChart;

const initAllCharts = () => {
  initRecruitmentCount();
  initMajorType();
  initSexScaleChart();
  initCollegeType();
};

const disposeAllCharts = () => {
  echarts.dispose(document.querySelector('#recruitmentCount') as HTMLElement);
  echarts.dispose(document.querySelector('#majorType') as HTMLElement);
  echarts.dispose(document.querySelector('#collegeType') as HTMLElement);
  echarts.dispose(document.querySelector('#sexScale') as HTMLElement);
};

const initMajorType = () => {
  const params: ITwoScaleParams = {
    echarts,
    title: `专业比例 (${chartData.recruitmentXData[currentIndex]})`,
    dom: document.querySelector('#majorType') as HTMLElement,
    labelList: chartData.majorTypeXData[currentIndex],
    valueList: chartData.majorTypeYData[currentIndex],
    themeColor: themeColor.value,
  };
  twoScaleChart(params);
};
const initCollegeType = () => {
  const params: ITwoScaleParams = {
    echarts,
    title: `学院比例 (${chartData.recruitmentXData[currentIndex]})`,
    dom: document.querySelector('#collegeType') as HTMLElement,
    labelList: chartData.collegeTypeXData[currentIndex],
    valueList: chartData.collegeTypeYData[currentIndex],
    themeColor: themeColor.value,
  };
  twoScaleChart(params);
};
const initSexScaleChart = () => {
  const params: ISexScaleParams = {
    echarts,
    title: `男女比例 (${chartData.recruitmentXData[currentIndex]})`,
    dom: document.querySelector('#sexScale') as HTMLElement,
    valueList: chartData.sexScaleYData[currentIndex],
    themeColor: themeColor.value,
  };
  sexScaleChart(params);
};
const initRecruitmentCount = () => {
  const params: IRecruitmentCountParams = {
    echarts,
    dom: document.querySelector('#recruitmentCount') as HTMLElement,
    labelList: chartData.recruitmentXData,
    valueList: chartData.recruitmentYData,
    examValueList: chartData.recruitmentExamYData,
    currentIndexCallBack: callBack,
    themeColor: themeColor.value,
  };
  recruitmentCountChart(params);
};

const callBack = (currentStageIndex: number) => {
  currentIndex = currentStageIndex;
  echarts.dispose(document.querySelector('#majorType') as HTMLElement);
  echarts.dispose(document.querySelector('#collegeType') as HTMLElement);
  echarts.dispose(document.querySelector('#sexScale') as HTMLElement);
  initMajorType();
  initCollegeType();
  initSexScaleChart();
};

const getChartData = async () => {
  const res: APIData = await api.getChartData(undefined, store.role, 'recruitment');
  if (res.code === 200) {
    chartData = res.data;
    currentIndex = chartData.majorTypeXData.length - 1;
  } else ElMessage.error(res.message);
};

const isCloseMenu = ref<boolean>(themeStore.isColseMenu);
const themeColor = ref<IThemeColor>(themeStore.currentThemeColor);
themeStore.$subscribe((args, states) => {
  if (themeColor.value.font != states.currentThemeColor.font) {
    themeColor.value = states.currentThemeColor;
    disposeAllCharts(); //销毁之前的实例
    initAllCharts(); //重新创建
  }

  if (isCloseMenu.value != states.isColseMenu) {
    isCloseMenu.value = states.isColseMenu;

    setTimeout(() => {
      disposeAllCharts(); //销毁之前的实例
      initAllCharts(); //重新创建
    }, 300);
  }
});
</script>

<style lang="scss" scoped>
#recruitmentCharts {
  height: 100%;
  .bottom {
    height: 55%;
    margin: 16px;
    margin-bottom: 0;
    #recruitmentCount {
      height: 100%;
      width: 100%;
    }
  }

  .top {
    height: 43%;
    display: flex;
    justify-content: space-between;
    &-chart {
      #majorType,
      #collegeType,
      #sexScale {
        height: 100%;
        width: 100%;
      }
      margin: 16px;
      margin-top: 0;
      width: 32%;
    }
  }
}
</style>
